【精选】Element ui中menu组件(el |
您所在的位置:网站首页 › le menu est verrouille怎么解决 › 【精选】Element ui中menu组件(el |
(此篇文章写下的时间是2020年,所以如今Element UI都更新了不知道多少版了,肯定会有些许变化,请勿完全照搬照抄,虽然可能这部分代码没什么大的变动,但还是要以官方文档为准,此文仅仅是借鉴,理解具体思路,然后再按照官方的例子来应用到自己的项目中) 初学者,刚接触,用到不知道怎么回事刚接触,今天就特意各种粘贴复制示例代码,终于自己试出来了,具体的结构层级关系。 看完就能知道这个menu的结构上怎么组织和使用 1. 我准备的示例:先上代码,格式加了空行,方便看结构:(前期模板组件的导入和注册都略过了) 导航一 分组一 选项1 选项2 选项3 选项4 选项1 导航二 导航三 导航四 2. 好戏正式开始:看上面的示例代码, 最外面一层是由 标签 包裹的, 先从简单的开始,看倒数一二三,后面那三个导航,因为都是最简单的结构, 仅一级导航栏我取用 导航二 来做演示。 用 标签 包裹的 , 里面的标签 是图标没什么说的, 那个标签 就是导航栏最顶上一层的一级导航(没有子导航栏的),我们来看一下效果: 导航二
总结,当你想要的导航栏只有一级的时候,我们就仅采用我这种结构的ok了, 包裹要显示的以及导航栏内容 一级导航栏 + 一级导航栏下的子导航栏观察最开始 官方element ui 给的案例,应该是和第一个导航栏有关,我们拿那一部分做尝试, 这个是用 标签包裹的 一级导航栏+子导航上面竟然没有显示我要他显示的内容,点开后的效果见下图 竟然我要的一级导航标题到了里面, 不对不对, 再回头看下示例, 先试下红色圈出的部分,添加上template 看下 一级dhl+zdh 子导航栏
但就是子导航栏的格式有点问题,不是我们想要的效果,不过一级导航栏的显示是有了,看来这个 template 标签是用来控制 submenu 的 对应的 那级的 导航栏内容的显示。 然后我们开始尝试 黄色框里面的部分: 一级dhl+zdh 子导航栏 选项4 选项1
看来 submenu 标签就是用来控制 多一层 子导航栏, 而里面的 template 标签就是用来设置 那一级导航栏 的标题内容的, 而实际的子导航栏,就单纯的一个导航栏【没有子导航栏那种】, 使用 el-menu-item 标签来实现 一级导航栏+子导航栏组现在我们再回过头来看导航组 官网示例提供了两种 初始化 导航组的方式 通过el-menu-item-group组件可以实现菜单进行分组,分组名可以通过title属性直接设定,也可以通过具名 slot 来设定 选项一 选项一 - 分组一 分组一 选项A 分组一 选项B 分组二 选项C 选项D 选项E 选项E - 选项1第一种和第二种分组方式的差别: 第一种以 template 标签方式 声明了组的名称 第二种以 munu-item-group 的 title 属性的方式 声明 里面的子导航栏 都是采用 标签 来声明的,这里都一样 上面就是我分析的结构,根据具体情况看看你需要哪种结构 然后就是说一下属性: 属性: * default-active:表示当前active的菜单项的编号 * index:类型为字符串,在每一个el-menu-item组件上都有一个编号,给default-active标记 参考: element-ui使用导航栏跳转路由用法 * slot:slot ,就是插入的意思 参考: element ui slot |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |